<!-- 首页的导航组件 -->
<template>
  <div class="nav">
    <div class="nav-item" v-for="item in navList" :key="item.imgUrl">
      <img :src="item.imgUrl" :alt="item.name">
      <span class="nav-item-text">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
//composition
export default {
  name: 'navbar',
  setup() {
    const navList = [
      { name: '超市便利', imgUrl: require('@/images/market.png') },
      { name: '菜市场', imgUrl: require('@/images/vegetable.png') },
      { name: '水果店', imgUrl: require('@/images/fruit.png') },
      { name: '鲜花绿植', imgUrl: require('@/images/flower.png') },
      { name: '医药健康', imgUrl: require('@/images/drug.png') },
      { name: '家具时尚', imgUrl: require('@/images/house.png') },
      { name: '烘培蛋糕', imgUrl: require('@/images/cake.png') },
      { name: '签到', imgUrl: require('@/images/check.png') },
      { name: '大牌免运', imgUrl: require('@/images/big.png') },
      { name: '红包套餐', imgUrl: require('@/images/red.png') }
    ]
    return { navList }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';

.nav {
  height: 46.4vw;
  width: 100%;
  padding: 4.2667vw 1.0667vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 6vw;

    img {
      width: 10.6667vw;
      margin-bottom: 1.6vw;
    }

    &-text {
      font-size: 12px;
      color: $theme-font-color;
      text-align: center;
    }
  }

  &-item:nth-child(5n) {
    margin-right: 0;
  }
}
</style>